<template>
  <view class="content">
    <image class="logo" src="/static/logo.png"></image>
    <view class="text-area">
      <text class="title">{{ title }}</text>
    </view>

    <view>
      <view>{{ number + 1 }}</view>
      <view>{{ ok ? 'YES' : 'NO' }}</view>
      <view>{{ message.split('').reverse().join('') }}</view>
    </view>

    <view v-for="item in arr" :key="item.id" style="color:#ff0000; text-align: center;">
      {{ JSON.stringify(item) }}
    </view>

    <view v-for="(item, index) in 6" :key="index" style="text-align: center;">
      <view :class="index % 2 === 0 ? 'blue-num' : 'black-num'">{{ index + 2 }}</view>
    </view>

    <view v-for="(value, name, index) in object" :key="index" style="text-align: center;">
      {{ index }}---{{ name }}---{{ value }}
    </view>

    <view v-for="item in arr" :key="item.id" style="text-align: center;">
      <view style="color:#333300;">{{ item.id }}:{{ item.name }}</view>
    </view>
    <view class="square-container">
      <view 
        class="interactive-square"
        :style="{ 
          width: squareSize + 'rpx', 
          height: squareSize + 'rpx',
          backgroundColor: squareColor
        }"
        @click="toggleSquare"
      ></view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      title: 'Hello',
      number: 1,
      ok: true,
      message: 'Hello Vue!',
      arr: [
        { id: 1, name: 'uni-app' },
        { id: 2, name: 'HTML' },
        { id: 3, name: 'wechat' },
        { id: 4, name: 'Android' }
      ],
      object: {
        title: 'How to do lists in Vue',
        author: 'Jane Doe',
        publishedAt: '2020-04-10'
      },
      squareSize: 200,  
      isLarge: false,    
      colorIndex: 0,    
      colors: [
        '#4CAF50', 
        '#2196F3', 
        '#FF9800', 
        '#F44336',  
        '#9C27B0', 
        '#00BCD4'   
      ]
    }
  },
  computed: {
    squareColor() {
      return this.colors[this.colorIndex];
    }
  },
  methods: {
    toggleSquare() {
      this.isLarge = !this.isLarge;
      this.squareSize = this.isLarge ? 350 : 150;
      this.colorIndex = (this.colorIndex + 1) % this.colors.length;
    }
  }
}
</script>

<style>
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20rpx;
}
.logo {
  width: 120rpx;
  height: 120rpx;
  margin-top: 100rpx;
}
.text-area {
  margin-top: 20rpx;
}
.title {
  font-size: 36rpx;
  font-weight: bold;
}
.blue-num {
  color: #00ffff;
  font-size: 32rpx;
}
.black-num {
  color: #333;
  font-size: 24rpx;
}
.square-container {
  margin-top: 50rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 60rpx;
}
.interactive-square {
  border: 2rpx solid #333;
  border-radius: 4rpx;
  cursor: pointer;
  box-sizing: border-box;
}
.square-hint {
  margin-top: 15rpx;
  font-size: 24rpx;
  color: #666;
}
</style>
